
.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  &-row {
    -webkit-flex-flow: row;
    flex-flow: row;
  }

  &-column {
    -webkit-flex-flow: column;
    flex-flow: column;
  }

  &-wrap {
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  @each $name,$value in (start:flex-start,end:flex-end,center:center,between:space-between,around:space-around) {
    &-x-#{$name} {
      justify-content: $value;
    }
  }

  @each $name,$value in (start:flex-start,end:flex-end,center:center,baseline:baseline,stretch:stretch) {
    &-y-#{$name} {
      align-items: $value;
    }
  }

  @each $name,$value in (start:flex-start,end:flex-end,center:center,between:space-between,stretch:stretch) {
    &-xy-#{$name} {
      align-content: $value;
    }
  }

  &-center{justify-content: center;align-items: center;}

  @for $i from 1 through 24 {
    .item-#{$i} {
      -webkit-box-flex: $i;
      -webkit-flex: $i;
      -ms-flex: $i;
      flex: $i;
      -webkit-tap-highlight-color: transparent;
    }
  }

  @each $name,$value in (start:flex-start,end:flex-end,center:center,baseline:baseline,stretch:stretch) {
    .item-#{$name} {
      align-self: $value;
    }
  }
}
$padding:15px;
@each $name in top,left,bottom,right {
  .padding-#{$name}{
    padding-#{$name}:$padding;
  }
}



